﻿<link href="~/Content/plugin/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/adminlte/css/AdminLTE.min.css" rel="stylesheet" />
<link href="~/Content/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugin/bootstrap.table/1.12.0/bootstrap-table.min.css" rel="stylesheet" />
<link href="~/Content/adminlte/css/skins/all-skins.min.css" rel="stylesheet" />
<link href="~/Content/plugin/layer/layer.min.css" rel="stylesheet" />
<link href="~/Content/plugin/select2/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/scrollbar.css" rel="stylesheet" />
<style>
    .small-box {
        border-radius: 5px;
    }

    body {
        background-color: transparent;
    } 

    .table {
        font-size: 13px;
        color: #333;
        font-weight: 400;
        text-align: center;
    }

    .select2-selection__rendered {
        line-height: normal !important;
        padding-left: 0 !important;
    } 
    .fontnumber {
        font-style: italic; 
    }
</style>
<section class="content">
    <div class="row">
        <div class="col-md-6">
            <div class="small-box bg-orange">
                <div class="inner">
                    <h3 id="ProjectTotal" class="fontnumber">0</h3>
                    <p class="text-bold">项目总数</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3 id="SaleAmountTotal" class="fontnumber">0</h3>
                    <p class="text-bold">销售总额</p>
                </div>
            </div>
        </div>  
        <div class="col-md-12">
            <div class="box box-primary box-solid">
                <div class="box-header with-border">
                    <i class="fa fa-bar-chart-o"></i>
                    <h3 class="box-title">月销售额-@DateTime.Now.Year</h3> 
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="month-chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-info box-solid">
                <div class="box-header with-border">
                    <i class="fa fa-table"></i>
                    <h3 class="box-title">销售占比-@DateTime.Now.Year</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="sale-chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-success box-solid">
                <div class="box-header with-border">
                    <i class="fa fa-bar-chart-o"></i>
                    <h3 class="box-title">团队销售额-@DateTime.Now.Year</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="group-chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="~/Content/plugin/jquery/jquery.min.js"></script>
<script src="~/Content/plugin/echarts/echarts.min.js"></script>
<script src="~/Content/plugin/echarts/jquery.ba-resize.min.js"></script>
<script src="~/Content/plugin/layer/layer.min.js"></script>
<script src="~/Content/plugin/jquery.blockUI/jquery.blockUI.min.js"></script>
<script src="~/Content/plugin/select2/js/select2.min.js"></script>
<script src="~/Content/framework/js/framework.min.js"></script>
<script src="~/Content/framework/js/framework-extension.js"></script>
<script src="~/Content/framework/js/framework-plugin-extension.js"></script>
@*<script src="~/Content/system/js/disable-devtool@latest.js"></script>*@
<script type="text/javascript">  
    $(function () {
        frame.ajax({
            url: '@Url.Action("ReportChartPage", "Home")',
            type: 'get',
            success: function (obj) {
                if (obj.success) {
                    $('#ProjectTotal').html(obj.data.ProjectTotal);
                    $('#SaleAmountTotal').html(frame.formatCurrency(obj.data.SaleAmountTotal,'CNY')); 
                    renderMonthChart('month-chart', obj.data.SalerMonthAmounts.Salers, obj.data.SalerMonthAmounts.SalerMonthAmountItemDetails);
                    renderSaleChart('sale-chart', obj.data.SalerYearAmountRates);
                    renderGroupChart('group-chart', obj.data.GroupYearAmounts);
                }
            }
        }); 
    }); 

    //月销售额-柱状
    function renderMonthChart(id, legendData, series) {
        var chart = echarts.init(document.getElementById(id)); 
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: 40,
                left: 20,
                right: 20,
                bottom: 20,
                containLabel: true,
            },
            legend: {
                data: legendData
            },
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            },
            yAxis: {},
            series: series
                //[
                //    {
                //        name: '张三',
                //        type: 'bar',
                //        barWidth: 30,
                //        data: [120, 100, 80, 70, 90, 150, 180, 160, 100, 90, 120, 100]
                //    },
                //    {
                //        name: '李四',
                //        type: 'bar',//表明柱状体，饼图是pie，折线图是line
                //        barWidth: 30,
                //        data: [120, 100, 80, 70, 90, 150, 180, 160, 100, 90, 120, 100],
                //    }
                //]
        };

        chart.setOption(option);
        $('.chart').resize(function () {
            chart.resize();
        });
    }

    //销售占比-饼图
    function renderSaleChart(id, datas) {
        var chart = echarts.init(document.getElementById(id));
        var total = datas.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0);
        var option = {
            tooltip: {
                trigger: 'item', 
                formatter: '{a} <br/>{b} : <span class="text-bold text-red">￥{c}</span> ({d}%)'
            },
            legend: { 
                top: '5%',
                orient: 'vertical',
                left: 'left'
            },
            graphic: {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: '用户统计\n' + '￥100',
                    rich: {
                        b: {
                            font: 'italic bold 18px cursive',
                        }
                    },
                    fill: '#337ab7',
                    textAlign: 'center',
                    letterSpacing: 3
                }
            },
            graphic: {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: '{b|销售总额\n' + ("￥" + total.toFixed(2)) + '}',
                    rich: {
                        b: {
                            font: 'italic bold 16px cursive',
                        }
                    },
                    fill: '#337ab7',
                    textAlign: 'center',
                    letterSpacing: 3
                }
            },
            series: [
                {
                    name: '销售金额',
                    type: 'pie',
                    radius: ['35%', '70%'],
                    //data: [
                    //    { value: 40, name: '张三' },
                    //    { value: 35, name: '李四' },
                    //    { value: 25, name: '王五' }
                    //],
                    data: datas,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
            ],
        };
        chart.setOption(option);
        $('.chart').resize(function () {
            chart.resize();
        });
    }

    //团队销售额-折线
    function renderGroupChart(id, datas) {
        var chart = echarts.init(document.getElementById(id));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{b} : <span class="text-bold text-red">￥{c}</span>'
            },
            grid: {
                top: 40,
                left: 20,
                right: 20,
                bottom: 20,
                containLabel: true,
            },
            xAxis: {
                type: 'category', 
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销售金额',
                type: 'line',
                smooth: true,
                //data: [50.00, 62.50, 70.71, 70.71, 62.50, 50.00,37.50, 29.29, 29.29, 37.50, 50.00, 62.50],
                data: datas,
                label: {
                    /*show: true,*/
                    formatter: '￥{c}',
                    position: 'top',
                    textStyle: {
                        color: '#006400',
                        fontWeight: 'bold',
                    }

                }
            }]
        };
        chart.setOption(option);
        $('.chart').resize(function () {
            chart.resize();
        });
    }
</script>